<template>
  <n-layout has-sider position="absolute">
    <n-layout-sider
      bordered
      collapse-mode="width"
      :collapsed-width="64"
      :width="240"
      show-trigger
      :collapsed="collapsed"
      @update:collapsed="siderUpdateCollapsed"
    >
      <div class="menu-header">
        <n-icon>
          <Blog />
        </n-icon>
        <n-gradient-text
          v-if="!collapsed"
          :size="18"
          gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"
        >
          个人博客后台管理
        </n-gradient-text>
      </div>

      <n-menu
        class="menu"
        :collapsed="collapsed"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :options="menuOptions"
        @update:value="updateMenu"
        v-model:value="menu"
      />
    </n-layout-sider>
    <n-layout>
      <n-layout-header bordered position="absolute" style="height: 80px">
        <n-space justify="space-between" align="center">
          <n-breadcrumb>
            <n-breadcrumb-item
              v-for="(item, index) in breadcrumb"
              :key="index"
              >{{ item }}</n-breadcrumb-item
            >
          </n-breadcrumb>
          <n-space align="center">
            <n-space>
              <n-button quaternary circle @click="activate">
                <template #icon>
                  <n-icon><settings-outline /></n-icon>
                </template>
              </n-button>
            </n-space>
            <User />
          </n-space>
        </n-space>
      </n-layout-header>
      <n-layout-content position="absolute" style="top: 80px">
        <slot />
      </n-layout-content>
      <!-- <n-layout-footer> footer </n-layout-footer> -->
    </n-layout>
    <n-drawer
      v-model:show="active"
      :width="502"
      :auto-focus="false"
      placement="right"
    >
      <n-drawer-content
        title="主题设置"
        body-content-style="text-align: center;"
      >
        <n-radio-group
          class="theme"
          name="theme"
          v-model:value="styles.mode"
          @update:value="updateTheme"
        >
          <n-radio-button
            v-for="item in themeList"
            :key="item.value"
            :value="item.value"
            :label="item.label"
          />
        </n-radio-group>
        <n-divider />
        <ThemeChange />
      </n-drawer-content>
    </n-drawer>
  </n-layout>
</template>

<script setup lang="ts">
import {
  NIcon,
  NRadioGroup,
  NRadioButton,
  NMenu,
  NLayoutSider,
  NLayout,
  NSpace,
  NLayoutHeader,
  NLayoutContent,
  NDrawer,
  NGradientText,
  NDrawerContent,
  NButton,
  useOsTheme,
  NBreadcrumb,
  NBreadcrumbItem,
  NCollapse,
  NCollapseItem,
  NDivider,
  NForm,
  NFormItem,
  NColorPicker,
} from "naive-ui";
import {
  BookOutline as BookIcon,
  NewspaperOutline,
  CodeWorking,
  SettingsOutline,
} from "@vicons/ionicons5";

import {
  DashboardOutlined,
  TagsOutlined,
  HistoryOutlined,
  InfoCircleTwotone,
} from "@vicons/antd";
import { Blog, Divide, CommentsRegular, Pagelines } from "@vicons/fa";
import { Email, UserProfile } from "@vicons/carbon";
import type { GlobalTheme, MenuOption } from "naive-ui";
import styleStore from "~/stores/style";
import { useRouter } from "vue-router";
import { darkTheme } from "naive-ui";

const router = useRouter();
const route = useRoute();
const styles = styleStore();
function renderIcon(icon: Component) {
  return () => h(NIcon, null, { default: () => h(icon) });
}
const collapsed = ref(false);
onMounted(() => {
  collapsed.value = styles.collapsed;
});
const siderUpdateCollapsed = (value: boolean) => {
  collapsed.value = value;
  updateCollapsed(value);
};
const updateCollapsed = (value: boolean) => {
  styles.collapsed = value;
};
const updateInverted = (value: boolean) => {};
const menuOptions: MenuOption[] = [
  {
    label: "控制台",
    key: "dashboard",
    icon: renderIcon(DashboardOutlined),
  },
  {
    label: "文章管理",
    key: "post",
    icon: renderIcon(BookIcon),
    children: [
      {
        label: "文章列表",
        key: "post-essay",
        icon: renderIcon(NewspaperOutline),
      },
      {
        label: "标签列表",
        key: "post-tag",
        icon: renderIcon(TagsOutlined),
      },
      {
        label: "分类列表",
        key: "post-category",
        icon: renderIcon(Divide),
      },
    ],
  },
  {
    label: "评论管理",
    key: "comments",
    icon: renderIcon(CommentsRegular),
  },
  {
    label: "页面管理",
    key: "page",
    icon: renderIcon(Pagelines),
  },
  {
    label: "作品管理",
    key: "work",
    icon: renderIcon(CodeWorking),
  },
  {
    label: "邮件管理",
    key: "email",
    icon: renderIcon(Email),
  },
  {
    label: "建站日志",
    key: "history",
    icon: renderIcon(HistoryOutlined),
  },
  {
    label: "用户管理",
    key: "user",
    icon: renderIcon(UserProfile),
  },
  {
    label: "个人中心",
    key: "myInfo",
    icon: renderIcon(InfoCircleTwotone),
  },
];
const menu = ref("");
const updateMenu = async (value: string, item: MenuOption) => {
  navigateTo(`/${value.replaceAll("-", "/")}`);
};
const breadcrumb = ref<string[]>([]);
watchEffect(() => {
  menu.value = String(route.name);
  breadcrumb.value = String(route.meta.title).split("-");
});

const active = ref(false);
const activate = (e: Event) => {
  active.value = true;
  e.preventDefault();
};
const osThemeRef = useOsTheme();
const themeList = ref([
  {
    label: "浅色",
    value: "light",
  },
  {
    label: "暗黑",
    value: "dark",
  },
  {
    label: "操作系统主题",
    value: "osTheme",
  },
  {
    label: "自定义",
    value: "custom",
  },
]);
watchEffect(() => {
  if (styles.mode === "osTheme")
    styles.theme = osThemeRef.value === "dark" ? darkTheme : null;
});
const updateTheme = (value: string) => {
  switch (value) {
    case "light":
      styles.theme = null;
      break;
    case "dark":
      styles.theme = darkTheme;
      break;
    case "osTheme":
      styles.theme = osThemeRef.value === "dark" ? darkTheme : null;
      break;
    case "custom":
      styles.theme = styles.customTheme;
      break;
    default:
      break;
  }
};
onMounted(() => {
  window.addEventListener("storage", (event) => {
    if (event.key === "style" && event.newValue) {
      const newStyles = JSON.parse(event.newValue);
      styles.customTheme = newStyles.customTheme;
      styles.mode = newStyles.mode;
      updateTheme(newStyles.mode);
    }
  });
});
onUnmounted(() => {
  window.removeEventListener("storage", (event) => {});
});
</script>
<style lang="scss" scoped>
.menu {
  margin-top: 20%;
}

.menu-header {
  margin-top: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottom {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
}

.n-layout-header {
  padding: 20px 30px;
}

.n-layout-content {
  padding: 20px 30px;
}
</style>
